<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>用于计算问题，10年以内可以有多少天</p>
		<div class="form">
			<label>开始年份<input type="text" class="startYear"/></label>
			<label>结束年份<input type="text" class="endYear"/></label>
			<input type="button" class="ok" value="确定" />
		</div>
		<div class="content"></div>
		<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var $start = null,
				$end = null,
				$content = null,
				$ok = null;
			var isLeap = function(year) {
				return year % 4 == 0 && year % 100 != 0 || year % 400 == 0;
			}
			var getYearList = function(startYear, endYear) {
				var arr = [];
				for(var i = startYear; i <= endYear; i++) {
					arr.push({ value: i, isLeap: isLeap(i) });
				}
				return arr;
			}
			var calcCount = function(arr, startIndex, endIndex) {
				var count = 0;
				for(var i = startIndex; i < endIndex; i++) {
					if(arr[i].isLeap) count++;
				}
				return count+365*(endIndex-startIndex);
			}
			var renderContent = function(start, end) {
				var list = getYearList(start, end),
					j = 1,
					domStr = "";
				for(var i = 0, len = list.length; i < len; i++) {
					var year = list[i];
					if(year.isLeap)
						domStr += "<span style='color:red;font-weight: bold;'>" + year.value + "</span>";
					else
						domStr += "<span>" + year.value + "</span>";
					domStr += "\t";
					if(j++ === 10) {
						if(i > 1) {
							domStr += "<span style='color:green;font-weight:bold;'>Leap Year:" + calcCount(list, i - 9, i + 1) + "</span>";
							i = i - 9;
						}
						domStr += "<br/>";
						j = 1;
					}
					if(i === len - 1) {
						domStr += "<span style='color:green;font-weight:bold;'>Leap Year:" + calcCount(list, i - 9, i + 1) + "</span>";
					}
				}
				$content.html("").append(domStr);
			}
			var run = function() {
				$start = $(".startYear"),
					$end = $(".endYear"),
					$content = $(".content"),
					$ok = $(".ok");
				$ok.click(function() {
					renderContent($start.val(), $end.val());
				})
				var curr = new Date().getFullYear();
				$start.val(curr);
				$end.val(curr+10);
				renderContent(curr, curr +10);
			}
			run();
		</script>
	</body>

</html>